<template>
  <div class="relative w-full h-full">
    <PageHeader :title="t('coupon.优惠券管理')" />
    <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    />
    <div class="mt12 toolbar flex_aic" v-my-point="'coupon:add'">
      <!-- <div class="addBtn flex_aic_jcc" @click="handleExport">
        <SvgIcon name="iconziyuan23" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('coupon.导出') }}</span>
      </div> -->
      <div class="addBtn flex_aic_jcc" @click="handleRelease(1)">
        <SvgIcon name="iconxinzeng" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('coupon.发布点对点优惠券') }}</span>
      </div>
      <div class="addBtn flex_aic_jcc" @click="handleRelease(2)">
        <SvgIcon name="iconxinzeng" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('coupon.发布商品分类优惠券') }}</span>
      </div>
      <div class="addBtn flex_aic_jcc" @click="handleRelease(3)">
        <SvgIcon name="iconxinzeng" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('coupon.发布新人优惠券') }}</span>
      </div>
    </div>
    <div class="mt12">
      <el-radio-group v-model="type" class="mb12" @change="toSearch">
        <el-radio-button :label="1">{{ t('coupon.点对点优惠券') }}</el-radio-button>
        <el-radio-button :label="2">{{ t('coupon.商品分类优惠券') }}</el-radio-button>
        <el-radio-button :label="3">{{ t('coupon.新人优惠券') }}</el-radio-button>
      </el-radio-group>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 290px)"
      border
      v-loading="loading"
    >
      <el-table-column :prop="`name${locale}`" :label="t('coupon.优惠券名称')" />
      <el-table-column :prop="'type'" :label="t('coupon.优惠券类型')">
        <template #default="scope">
          <el-tag v-if="scope.row.type === 1" type="success"
            >{{ t('coupon.点对点发放优惠券') }}</el-tag
          >
          <el-tag v-else-if="scope.row.type === 2" type="info"
            >{{ t('coupon.商品分类优惠券') }}</el-tag
          >
          <el-tag v-else-if="scope.row.type === 3" type="warning"
            >{{ t('coupon.新人优惠券') }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column :prop="'discountMinus'" :label="t('coupon.优惠内容')">
        <template #default="scope">
          满{{ scope.row.discountLimit }}{{ t('coupon.元') }}减{{ scope.row.discountMinus }}{{ t('coupon.元') }}
        </template>
      </el-table-column>
      <el-table-column :prop="'expireDate'" :label="t('coupon.已领取已使用发布数')">
        <template #default="scope">
          <span class="color-db5609"
            >{{ scope.row.vipCouponCount ?? 0 }} /
            {{ scope.row.vipCouponUsedCount ?? 0 }} /
            {{ scope.row.stock ?? 0 }}</span
          >
        </template>
      </el-table-column>
      <el-table-column :prop="'useTime'" :label="t('coupon.使用时间')">
        <template #default="scope">
          <span>
            {{
              moment(scope.row.useTimeStart).format("YYYY-MM-DD HH:mm:ss") +
              " " + t('coupon.至') + " " +
              moment(scope.row.useTimeEnd).format("YYYY-MM-DD HH:mm:ss")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :prop="'status'" :label="t('coupon.活动状态')">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 1" type="success">{{ t('coupon.正常') }}</el-tag>
          <el-tag v-else-if="scope.row.status == 0" type="info">{{ t('coupon.停用') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('coupon.操作')" fixed="right" width="180">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button type="text" size="small" @click="handleWatch(scope.row)"
              >{{ t('coupon.查看') }}</el-button
            >
            <el-popconfirm
              :title="t('coupon.确定要失效此优惠券吗')"
              @confirm="handleInvalid(scope.row)"
              :confirm-button-text="t('coupon.确定')"
              :cancel-button-text="t('coupon.取消')"
              width="300px"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small" v-my-point="'coupon:disable'">{{ t('coupon.失效') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import SearchCom from "@/components/searchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import Api from "@/config/api/api";
import moment from "moment";
import { ElMessage } from "element-plus";

const { t, locale } = useI18n();
const router = useRouter();
const type = ref(1);
const searchList = [
  {
    label: t('coupon.优惠券名称'),
    key: "name",
    type: "input",
  },
  {
    label: t('coupon.优惠券金额'),
    key: "discountMinus",
    type: "input",
  },
  {
    label: t('coupon.优惠券到期时间'),
    key: "expireDate",
    type: "daterange",
    format: "YYYY-MM-DD",
  },
];

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(Api.coupon_list, {
  defaultSearchParams: {type: type.value},
});

const toSearch = (params) => {
  handleSearch({
    discountMinus: params?.discountMinus || undefined,
    ["name" + locale.value]: params?.name || undefined,
    useTimeEndStart: params.expireDate?.[0] ? moment(params.expireDate?.[0]).format("YYYY-MM-DD 00:00:00") : undefined,
    useTimeEndEnd: params.expireDate?.[1] ? moment(params.expireDate?.[1]).format("YYYY-MM-DD 23:59:59") : undefined,
    type: type.value,
  });
};

const handleRelease = (type) => {
  router.push({
    path: "/store/coupon/release",
    query: { type },
  });
};

const handleExport = () => {
  console.log("导出");
};

const handleWatch = (row) => {
  // 查看方法
  router.push({
    path: "/store/coupon/release",
    query: { id: row.id, type: row.type, isWatch: true },
  });
};

const handleInvalid = (row) => {
  Api.coupon_disable(row.id).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t('coupon.失效成功'));
      getDataList();
    }
  });
};
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(24, 144 ,255, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
</style>
